<template>
    <div class="box">
        <div>姓名:{{p.name}}</div>
        <div>年龄:{{ p.age }}</div>
        <div>职位:{{ p.job }}</div>
    </div>
    <div>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeJob">修改职位</button>
    </div>
</template>
<script lang='ts' setup>
    interface PersonType{
        readonly name:string
        age:number
        job:string
    }
    import {reactive} from 'vue'
    const p=reactive<PersonType>({name:"张三",age:23,job:"软件工程师"})
    const changeAge=()=>p.age++
    const changeJob=()=>p.job="IT讲师"
</script>
<style lang='scss' scoped>
    .box{
        font-size: 20px;
    }
</style>